// 消息管理
<template>
  <el-row :gutter="100">
  <el-col :span="6"><div class="grid-content bg-purple"><el-select v-model="value" style="width:190px" placeholder="消息类型">
    <el-option class="option1"
      v-for="item in option1"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"><el-select v-model="value2" style="width:190px" placeholder="消息状态">
    <el-option class="option2"
      v-for="item in option2"
      :key="item.value2"
      :label="item.label"
      :value="item.value2">
    </el-option>
  </el-select></div>
  </el-col>
  <el-col :span="6">
  <div class="block">
    <el-date-picker style="width:190px"
      v-model="value3"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>
  </el-col>
  
  
  <div >
  <el-row style="margin-left:-320px;margin-top:100px">
      <el-button type="primary" @click="getlistData">查询</el-button> 
      <el-button type="reset" @click="chongzhi">重置</el-button> 
 </el-row>

  </div>

   <div style="margin-left:-100px;margin-top:100px">
  
     <el-button type="primary" plain @click="yidu">全部标记为已读</el-button>
      
 </div>
    

   
    <el-table
      id="table"
      
      :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"

      style="width: 100%; margin-left: -130px"
    >
      <el-table-column
        align="center"
        header-align="center"
        prop="date"
        label="序号"
        width="70"
      >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="name"
        label="标题"
        width="250"
      >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="address"
        label="消息类型"
        width="180"
      >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="time"
        label="创建时间"
        width="180"
      >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="state"
        label="状态"
        width="135"
      >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="操作"
        width="135"
      >
        <button class="button1" @click="xiangqing">详情</button>
      </el-table-column>
    </el-table>
     <div class="block">
    
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
  </div>
</el-row>

</template>

<script>

export default {
methods:{
 
  xiangqing () {
     console.log(this.currentPage)
    this.$axios.get('/message/messageContent',{
      params:{
       id: this.id,
        status: this.status
      }
    }).then(res=>{
      console.log(res);
    })
    },

 handleSizeChange(val) {
   this.pageSize = val
   this.currentPage = 1
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`);
      },
    //  xiangqing (){
    //   window.location.href="/message/messageContent"
    //  },
     yidu(){
       for(let i = 0; i<this.list.length;i++) {
         this.list[i].state = "已读"
       }
     },
     chongzhi(){
      window.location.reload();
     }
     
},
 mounted(){
      this.fetchdata()
       },
 data() {
      return {
        currentPage:1,
        pageSize:4,
        pageSizes:[4,8,12,16],
        totalCount:22,
        tableData:[],
        status: "任务消息",
        id:"张三",

        list:[
          {
            date: '1',
            name: '张三创建了劳务采购任务指派给您',
            address: '任务消息',
            time:'2021-8-01 15:30',
            state:"已读",
            operation:""
          }, {
            date: '2',
            name: '李四创建了材料采购的任务指派给您',
            address: '任务消息',
            time:'2021-8-02 15:30',
             state:"未读",
             operation:""
          }, {
            date: '3',
            name: '王五提交了任务结果需要您审批',
            address: '审批消息',
            time:'2021-8-03 15:30',
             state:"已读",
             operation:""
          }, {
            date: '4',
            name: '张三提交了材料采购申请需要您审批',
            address: '审批消息',
            time:'2021-8-04 15:30',
             state:"未读",
             operation:""
          },
           {
            date: '5',
            name: '张0提交了材料采购申请需要您审批',
            address: '审批消息',
            time:'2021-8-04 15:30',
             state:"未读",
             operation:""
          },
           {
            date: '6',
            name: '张1提交了材料采购申请需要您审批',
            address: '审批消息',
            time:'2021-8-04 15:30',
             state:"未读",
             operation:""
          },
           {
            date: '7',
            name: '张2提交了材料采购申请需要您审批',
            address: '审批消息',
            time:'2021-8-04 15:30',
             state:"未读",
             operation:""
          }, {
            date: '8',
            name: '李四创建了材料采购的任务指派给您',
            address: '任务消息',
            time:'2021-8-02 15:30',
             state:"未读",
             operation:""
          }, {
            date: '9',
            name: '李四创建了材料采购的任务指派给您',
            address: '任务消息',
            time:'2021-8-02 15:30',
             state:"未读",
             operation:""
          }, {
            date: '10',
            name: '李四创建了材料采购的任务指派给您',
            address: '任务消息',
            time:'2021-8-02 15:30',
             state:"未读",
             operation:""
          }, {
            date: '11',
            name: '李四创建了材料采购的任务指派给您',
            address: '任务消息',
            time:'2021-8-02 15:30',
             state:"未读",
             operation:""
          }, {
            date: '12',
            name: '李四创建了材料采购的任务指派给您',
            address: '任务消息',
            time:'2021-8-02 15:30',
             state:"未读",
             operation:""
          }, {
            date: '13',
            name: '李四创建了材料采购的任务指派给您',
            address: '任务消息',
            time:'2021-8-02 15:30',
             state:"未读",
             operation:""
          }, {
            date: '14',
            name: '李四创建了材料采购的任务指派给您',
            address: '任务消息',
            time:'2021-8-02 15:30',
             state:"未读",
             operation:""
          }, {
            date: '15',
            name: '李四创建了材料采购的任务指派给您',
            address: '任务消息',
            time:'2021-8-02 15:30',
             state:"未读",
             operation:""
          },
           {
            date: '16',
            name: '张1提交了材料采购申请需要您审批',
            address: '审批消息',
            time:'2021-8-04 15:30',
             state:"未读",
             operation:""
          },
           {
            date: '17',
            name: '张1提交了材料采购申请需要您审批',
            address: '审批消息',
            time:'2021-8-04 15:30',
             state:"未读",
             operation:""
          },
           {
            date: '18',
            name: '张1提交了材料采购申请需要您审批',
            address: '审批消息',
            time:'2021-8-04 15:30',
             state:"未读",
             operation:""
          },
           {
            date: '19',
            name: '张1提交了材料采购申请需要您审批',
            address: '审批消息',
            time:'2021-8-04 15:30',
             state:"未读",
             operation:""
          },
           {
            date: '20',
            name: '张1提交了材料采购申请需要您审批',
            address: '审批消息',
            time:'2021-8-04 15:30',
             state:"未读",
             operation:""
          }
          ,
           {
            date: '',
            name: '张1提交了材料采购申请需要您审批',
            address: '审批消息',
            time:'2021-8-04 15:30',
             state:"未读",
             operation:""
          }
        ],
        option1: [{
          value: '选项1',
          label: '任务消息'
        }, {
          value: '选项2',
          label: '审批消息'
        }, {
          value: '选项3',
          label: '项目消息'
        }, {
          value: '选项4',
          label: '通知通告'
        }, ],
        option2: [{
          value2: '选项1',
          label: '已读'
        },  {
          value2: '选项4',
          label: '未读'
        }, ],
      
        value: '',
        value2:'',
         pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }],
      
           
        },
     
        
     currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,

      value3: "",
      // tableData: [
      //   {
      //     date: "1",
      //     name: "张三创建了劳务采购任务指派给您",
      //     address: "任务消息",
      //     time: "2021-8-01 15:30",
      //     state: "已读",
      //     operation: "",
      //   },
      //   {
      //     date: "2",
      //     name: "李四创建了材料采购的任务指派给您",
      //     address: "任务消息",
      //     time: "2021-8-02 15:30",
      //     state: "未读",
      //     operation: "",
      //   },
      //   {
      //     date: "3",
      //     name: "王五提交了任务结果需要您审批",
      //     address: "审批消息",
      //     time: "2021-8-03 15:30",
      //     state: "已读",
      //     operation: "",
      //   },
      //   {
      //     date: "4",
      //     name: "张三提交了材料采购申请需要您审批",
      //     address: "审批消息",
      //     time: "2021-8-04 15:30",
      //     state: "未读",
      //     operation: "",
      //   },
      //   {
      //     date: "5",
      //     name: "张0提交了材料采购申请需要您审批",
      //     address: "审批消息",
      //     time: "2021-8-04 15:30",
      //     state: "未读",
      //     operation: "",
      //   },
      //   {
      //     date: "6",
      //     name: "张1提交了材料采购申请需要您审批",
      //     address: "审批消息",
      //     time: "2021-8-04 15:30",
      //     state: "未读",
      //     operation: "",
      //   },
      //   {
      //     date: "7",
      //     name: "张2提交了材料采购申请需要您审批",
      //     address: "审批消息",
      //     time: "2021-8-04 15:30",
      //     state: "未读",
      //     operation: "",
      //   },
      // ],
     
    };
  },
};
</script>

<style scoped>
.el-row{
   padding-left: 220px;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #fff;
}
.bg-purple {
  background: #fff;
}
； ； .bg-purple-light {
  background: #fff;
}
.grid-content {
  border-radius: 4px;
  min-height: 40px;
}
.row-bg {
  padding: 10px 0;
  background-color: #fff;
}
table {
  text-align: center;
}
.button1 {
  border: none;
  background-color: white;
}
.button1:hover {
  color: rgb(48, 125, 255);
  text-decoration: underline;
}
</style>